<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="params.entity" style="padding-bottom: 0px;">
          <el-form-item label="题目">
            <el-input v-model="params.entity.title" placeholder="请输入题目"/>
          </el-form-item>
          <el-form-item label="题目类型">
            <el-input v-model="params.entity.questionType" placeholder="请输入题目类型"/>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="params.entity.statusFlag" placeholder="请选择状态" clearable="true">
              <el-option v-for="(item,index) in STATUS_LIST" :label="item.text" :value=item.label></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>
            <el-button type="primary" :icon="Plus" @click="addDialog">新增</el-button>
<!--            <el-button type="primary" :icon="Plus" @click="addNewTk">新建题库</el-button>-->
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table v-loading="loading"
              :data="tableData.list"
              style="width: 100%"
              height="500"
              :row-key="getRowKeyOfTarget"
              :default-sort="{ prop: 'date', order: 'descending' }" @selection-change="handleSelectionChange">
      <el-table-column prop="title" label="题目" show-overflow-tooltip/>
      <el-table-column prop="questionTypeName" label="题目类型" show-overflow-tooltip/>
      <el-table-column prop="statusFlagName" label="状态" show-overflow-tooltip/>

      <el-table-column fixed="right" label="操作" width="300" show-overflow-tooltip>
        <!--        <template #header>-->
        <!--          <el-input v-model="params.search" @keyup.enter.native="searchData" placeholder="搜索角色名称/介绍"/>-->
        <!--        </template>-->
        <template #default="scope">
          <el-button link type="danger" :icon="Delete" size="small" @click="showDeleteDialog(scope.row.id)">删除
          </el-button>
          <!--          <el-button link type="primary" :icon="Edit" size="small" @click="editDialog(scope.row)">编辑</el-button>-->
          <el-button link type="primary" :icon="Edit" size="small" @click="showOptions(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size"
                   :page-sizes="[100, 200, 300, 400]" layout="sizes, prev, pager, next" :total="tableData.total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </el-card>

  <el-drawer
      v-model="drawerOptions"
      title="题目选项"
      :direction="'rtl'"
      size="60%"
      :before-close="handleClose"
  >
    <depress-question-drawer
        :questionId="currentQuestionId"
        :ruleForm="ruleForm"
        :questionOptions="questionOptions"
        :questionSolution="questionSolution"
    ></depress-question-drawer>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
import {onMounted, computed, reactive, ref} from 'vue'
import {Params, Result} from "@/apis/model/common/common.interfaces"
import {Delete, Edit, Search, Share, Upload, Plus, Setting} from '@element-plus/icons-vue'
import DepressQuestionAddOrEdit from './depressQuestionAddOrEdit.vue'
import {STATUS_LIST} from '@/util/common.util';
import {DepressQuestion}
  from "@/apis/model/depress/DepressQuestionModel";
import {deleteDepressQuestionById, depressQuestionPage, saveOrUpdateAll} from "@/apis/http/depress/DepressQuestionHttp";
import DepressOptionsList from "@/views/depress/DepressOptionsList.vue";
import DepressQuestionDrawer from "@/views/depress/DepressQuestionDrawer.vue";
import {DepressOptions} from "@/apis/model/depress/DepressOptionsModel";
import {depressOptionsPage} from "@/apis/http/depress/DepressOptionsHttp";
import {getSolutionModelByQuestionId} from "@/apis/http/depress/DepressSolutionHttp";
import {DepressSolution} from "@/apis/model/depress/DepressSolutionModel";

const drawerOptions = ref(false)
const currentQuestionId = ref()
// 选择数据
const multipleSelection = ref<DepressQuestion[]>([])

// 选项列表
const questionOptions = ref({
  total: 0,
  list: [] as Array<DepressOptions>
});

const questionSolution = ref({} as DepressSolution)

// 查询
const questionOptionsParams: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {statusFlag: 1, delFlag: 0} as DepressOptions
})

const findQuestionOptionsLists = (questionId: number) => {
  questionOptionsParams.entity.questionId = questionId;
  depressOptionsPage(questionOptionsParams).then((res: Result) => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      questionOptions.value = data
    }
  })
}

const getQuestionSolution = (questionId: number) => {
  getSolutionModelByQuestionId(questionId).then(res => {
    questionSolution.value = res.data;
  })
}

const showOptions = (row: DepressQuestion) => {
  currentQuestionId.value = row.id;
  ruleForm.value = row;
  findQuestionOptionsLists(currentQuestionId.value);
  getQuestionSolution(currentQuestionId.value);
  drawerOptions.value = true;
}

// 查询
const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {}
})

const handleClose = (done: () => void) => {
  currentQuestionId.value = -1;
  drawerOptions.value = false;
  done();
}

function confirmClick() {
  ElMessageBox.confirm(addDataType.value == 'add' ? `确认保存数据 ?` : `确认修改数据 ?`)
      .then(() => {
        saveOrUpdateAll({
          addDataType: addDataType.value,
          question: ruleForm.value,
          options: questionOptions.value.list,
          solution: questionSolution.value
        }).then(() => {
          drawerOptions.value = false;
          params.current = 1;
          initList();
          ElMessage({
            message: '保存成功.',
            type: 'success',
          })
          currentQuestionId.value = -1;
          drawerOptions.value = false;
        }).catch(e => {
          drawerOptions.value = false;
          ElMessage.error("保存失败，请稍后再试！")
        })
      })
      .catch(() => {
        // catch error
      })
}

const ruleForm = ref<DepressQuestion>({} as DepressQuestion)

// AddOrEditVisible
const addOrEditVisible = ref(false)

// table 表数据
const tableData: any = ref({});

// 加载数据
const loading = ref(true)
const addDataType = ref('update');

/**
 * 初始化数据
 */
const initList = () => {
  loading.value = true
  depressQuestionPage(params).then((res: Result) => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  })
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

/**
 * 添加弹出
 */
const addDialog = () => {

  ruleForm.value = {questionType: 0} as DepressQuestion;
  questionOptions.value = {
    total: 0,
    list: []
  }
  questionSolution.value = {} as DepressSolution
  addDataType.value = 'add'
  drawerOptions.value = true;
}

/**
 * 弹出删除对话框
 */
const showDeleteDialog = (id: number) => {
  ElMessageBox.confirm(
      '是否删除?',
      '提醒',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteDepressQuestionById(id).then((res: Result) => {
      const code = res.code;
      if (code == 200) {
        ElMessage({
          message: '删除数据成功！',
          type: 'success',
        })
        initList();
      } else {
        ElMessage.error('删除数据失败！');
      }
    })
  }).catch(() => {
    // ElMessage({
    //   type: 'info',
    //   message: 'Delete canceled',
    // })
  })
}

// 翻页选中
const getRowKeyOfTarget = (row: DepressQuestion) => {
  return row.id
}

const handleSelectionChange = (val: DepressQuestion[]) => {
  multipleSelection.value = val
}

const addNewTk = () => {
  console.log(multipleSelection);
}


onMounted(() => {
  initList()
})
</script>

<style>
</style>
